@highlight-ui/utils-commons

@highlight-ui/utils-commons

Installation

yarn add @highlight-ui/utils-commons

Usage

import utils from '@highlight-ui/utils-commons';

Exported Types

Name	Description
FontFamily	Valid FontAwesome family variants
Locale	Used for internationalization
Size	Allowed size variants
Direction	Used for positioning elements
ComponentMetadata	Used for specifying required data-attributes for e2e tests
ParsedMetadata	Same as ComponentMetadata but every attribute is prefixed with data-*
PropsWithMetadata	Utility type for adding metadata to a component's props
OutlineVariant	Allowed outlines on input elements
ValidationStatus	Used for specifying validations status for a message or a file

Exported Functions

parseMetadata()

Takes an object and converts all of its properties to valid HTML data attributes.

import utils from '@highlight-ui/utils-commons';

const metadata = {
  firstAttribute: '1',
  secondAttribute: '2',
};

const parsedMetadata = utils.parseMetadata(metadata);

console.log(parsedMetadata);
/*
  Output:
 {
  'data-first-attribute': '1',
  'data-second-attribute': '2',
  }
*/

forkHandlers()

Receives an array of callbacks and returns a function that accepts an event argument that will be passed to every callback in the array.

import utils from '@highlight-ui/utils-commons';

const MyComponent = () => {
  const handleClick = utils.forkHandlers([
    () => {
      console.log('first handler');
    },
    () => {
      console.log('second handler');
    },
    (event) => {
      event.preventDefault();
      console.log('third handler');
    },
  ]);

  return <div onClick={handleClick}>Click Me</div>;
};

withDeprecationWarning()

Higher order component that can be used to show a deprecation message as a warning in the console, with optional further information on how to use a replacement.

Prop	Type	Required	Default	Description
WrappedComponent	ReactComponent	Yes		Component to display console warning about deprecation - when used
migrationGuideLink	string	No	null	Valid link to a migration guide from deprecated component to alternative

withDeprecationWarning(
  ADeprecatedComponent,
  'https://optional-link-to-a-migration-guide.com',
);

This will show as a warning on the console:

⚠️ Deprecation Warning: ADeprecatedComponent is now deprecated. See https://optional-link-to-a-migration-guide.com for migration guidance.